const { log, e, appendHtml, convertDuration } = require('./helper')

const { ipcRenderer } = require('electron')

let musicAudio = new Audio()
// 设置初始音量为 0.5
musicAudio.volume = 0.5
let allTracks
let currentTrack

// 拿到 tracks 在 index.html 中渲染音乐列表
const renderTracksList = (tracks) => {
    let div = e('#id-tracks')
    // 渲染之前先清空该元素内容
    div.innerHTML = ''
    // 用 map 处理 paths，并用 appendHTML 函数将元素插入 DOM
    tracks.map((e) => {
        let name = e.fileName
        let li = `
            <li class="row music-track list-group-item d-flex justify-content-between align-items-center ">
                <div class="col-10">
                    <i class="fas fa-music mr-2 text-muted"></i>
                    <b>${name}</b>
                </div>
                <div class="col-2">
                    <i class="far fa-play-circle ml-4 mr-3" data-id="${e.id}"></i>
                    <i class="far fa-trash-alt" data-id="${e.id}"></i>
                </div>
            </li>
            `
        appendHtml(div, li)
    })
}

const renderPlayerHTML = (name, duration) => {
    const player = e('#player-status')
    const html = `<div class="col font-weight-bold">
                  正在播放：${name}
                </div>
                <div class="col">
                  <span id="current-seeker">00:00</span> / ${convertDuration(duration)}
                </div>`
    player.innerHTML = html
}

const updateProgressHTML = (currentTime, duration) => {
    // 计算 progress
    const progress = Math.floor(currentTime / duration * 100)
    const bar = e('#player-progress')
    bar.innerHTML = progress + '%'
    bar.style.width = progress + '%'
    const seeker = e('#current-seeker')
    seeker.innerHTML = convertDuration(currentTime)
}

// 给 添加音乐按钮 绑定事件，给主进程发送消息新建窗口
e('#id-button-add').addEventListener('click', (event) => {
    ipcRenderer.send('add-music-window')
})

// 给 搜索按钮音乐 绑定事件，给主进程发送消息新建窗口
e('#id-button-search').addEventListener('click', (event) => {
    ipcRenderer.send('search-music-window')
})

// 绑定事件委托 处理音乐列表操作逻辑 播放、暂停、删除
e('#id-tracks').addEventListener('click', (event) => {
    log('进入事件委托')
    event.preventDefault()
    const { dataset, classList } = event.target
    // 当前点击按钮的 id
    const id = dataset && dataset.id
    // 判断点击的是 播放 按钮
    if(id && classList.contains('fa-play-circle')) {
        // 这里要开始播放音乐
        // 判断点击的按钮的 id 和当前 currentTrack.id 是否一致
        // 如果一致 继续播放
        if (currentTrack && currentTrack.id === id) {
            // 继续播放音乐
            musicAudio.play()
            // 如果不一致 说明要切换歌曲
        } else {
            // 播放新的歌曲，注意还原之前的图标
            currentTrack = allTracks.find(track => track.id === id)
            musicAudio.src = currentTrack.path
            musicAudio.play()
            const resetIconEle = e('.fa-pause-circle')
            if (resetIconEle) {
                resetIconEle.classList.replace('fa-pause-circle', 'fa-play-circle')
            }
        }
        // 将点击的播放图标换成 暂停图标
        classList.replace('fa-play-circle', 'fa-pause-circle')
        // 判断点击的是 暂停 按钮
    } else if (id && classList.contains('fa-pause-circle')) {
        // 处理暂停逻辑
        musicAudio.pause()
        classList.replace('fa-pause-circle', 'fa-play-circle')
        // 判断点击的是 垃圾桶 按钮
    } else if (id && classList.contains('fa-trash-alt')) {
        // 删除之前先暂停播放 否则会出现删除了但是页面还在播放这首歌
        musicAudio.pause()
        // 发送事件 删除这条音乐
        ipcRenderer.send('delete-track', id)
    }
})

ipcRenderer.on('getTracks', (event, tracks) => {
    allTracks = tracks
    renderTracksList(tracks)
})

musicAudio.addEventListener('loadedmetadata', () => {
    //渲染播放器状态
    renderPlayerHTML(currentTrack.fileName, musicAudio.duration)
})

musicAudio.addEventListener('timeupdate', () => {
    //更新播放器状态
    updateProgressHTML(musicAudio.currentTime, musicAudio.duration)
})




